(function($) {

	function setOverlayStyle() {

	}

	function showMainScrollBar(visible) {
		if (visible) {
			$('body').css({'overflow-y': 'auto'});
		} else {
			$('body').css({'overflow': 'hidden'});
		}
	}

	function getLocalPath(localProtoPath) {
		if (localProtoPath.startsWith('file:///'))
			return localProtoPath.substr(13, localProtoPath.length - 15);
		return localProtoPath;
	}

	$.fn.xxslider = function() {

		var children = $(this).children();
		children.css({'display': 'none'});

		var image_files = new Array();
		var image_index = 0;
		for (var i = 0; i < children.length; i++) {
			var file = children.eq(i).attr('data-src');
			if (file.length != 0) {
				image_files.push(file);
			}
		}

		function showPreviousButton(visible) {
			if (visible) {
				$('#left-btn-wrap').fadeIn('slow');
			} else {
				$('#left-btn-wrap').fadeOut('slow');
			}
		}

		function showNextButton(visible) {
			if (visible) {
				$('#right-btn-wrap').fadeIn('slow');
			} else {
				$('#right-btn-wrap').fadeOut('slow');
			}
		}

		function showPreviousImage() {
			image_index = image_index - 1;
			showNextButton(true);

			if (image_index <= 0) {
				showPreviousButton(false);
			}

			var imageViewer = $('#xx-overlay-image-viewer > img');
			var imageFile = image_files[image_index];
			console.log('previous image: ' + imageFile);
			imageViewer.attr('src', imageFile);
		}

		function showNextImage() {
			image_index = image_index + 1;
			showPreviousButton(true);
			if (image_index >= (image_files.length -1)) {
				showNextButton(false);
			}

			var imageViewer = $('#xx-overlay-image-viewer > img');
			var imageFile = image_files[image_index];
			console.log('next image: ' + imageFile);
			imageViewer.attr('src', imageFile);
		}

		var overlayMarkup;
		if (image_files.length == 1) {
			overlayMarkup = '<div id="xx-overlay" style="display: none"><div id="xx-overlay-image-viewer"><img src=""/></div></div>';
		} else {
			overlayMarkup = '<div id="xx-overlay" style="display: none"><div id="left-btn-wrap"><img src="./images/left.png" /></div><div id="right-btn-wrap"><img src="./images/right.png" /></div><div id="xx-overlay-image-viewer"><img src=""/></div></div>';
		}

		showMainScrollBar(false);
		var $overlay = $(overlayMarkup).appendTo('body').fadeIn('slow');

		var imageOverlay = $('#xx-overlay');
		imageOverlay.css({'width': '100%',
						  'height': '100%',
						  'position': 'fixed',
						  'top': '0',
						  'left': '0',
						  'overflow': 'auto'});

		var imageWrap = $('#xx-overlay-image-viewer');
		imageWrap.css({'margin-top': '20px',
					   'margin-bottom': '20px',
					   'margin-left': '0',
					   'margin-right': '0',
					   'text-align': 'center'});

		if (image_files.length > 1) {
			var windowHeight = $(window).height();
			const HorSpace = 20;
			$('#left-btn-wrap').css({
				'position': 'fixed',
				'top': (windowHeight / 2 - $(this).height() / 2) +'px',
				'left': HorSpace + 'px'
			});

			$('#right-btn-wrap').css({
				'position': 'fixed',
				'right': HorSpace + 'px',
				'top': (windowHeight / 2 - $(this).height() / 2) + 'px'
			});

			$('#left-btn-wrap').on('click', function(e) {
				showPreviousImage();
				e.stopPropagation();
			});

			$('#right-btn-wrap').on('click', function(e) {
				showNextImage();
				e.stopPropagation();
			});

			showPreviousButton(false);
			showNextButton(true);
		}

		var imageViewer = $('#xx-overlay-image-viewer > img');
		imageViewer.css({'margin-left': 'auto',
					     'margin-right': 'auto'});

		var localFile = getLocalPath(image_files[0]);
		console.log(localFile);
		imageViewer.attr('src', localFile);

		$overlay.css({'background': 'rgba(0, 0, 0, 0.7)',
					  'width': '100%',
					  'height': '100%',
					  'z-index': '999'});

		$('#xx-overlay').on('click', function(e) {
			$(this).fadeOut('fast', function() {
				$(this).remove();
				showMainScrollBar(true);
			});
		});
		return this;
	}
}(jQuery));